
<template>
  <div id="orderDataList" :class='{"isiphone":$isiphone}'>
    <div class="top">
      <p>
        <span @click='openPicker(1)'>{{start}}</span>~
        <span @click='openPicker(2)'>{{end}}</span>
      </p>
      <mt-datetime-picker
        ref="picker1"
        type="date"
        :value='value'
        @confirm="handleConfirm1"
        >
      </mt-datetime-picker>
      <mt-datetime-picker
        ref="picker2"
        type="date"
        :value='value'
        @confirm="handleConfirm2">
      </mt-datetime-picker>
    </div>
    <div class="middle">
      <div class="one" v-for="(item, index2) in index==0?storeD:brandD" :key='index2' @click='JumpItem(item)'>
        <img :src="item.img" alt="">
        <div class="detail">
          <p>{{item.name}}</p>
          <span>{{"￥"+item.money}}</span>
          <span>
            核销时间：{{item.date}}
          </span>
        </div>
      </div>
      <load-more :show-loading="false" tip="暂无更多数据" v-show="isloading" background-color="#fbf9fe"></load-more>
    </div>
  </div>
</template>

<script>
import { Datetime, LoadMore } from "vux";
export default {
  name: "orderDataList",
  data() {
    return {
      storeD: [],
      brandD: [],
      index: this.$route.query.type,
      start: "开始时间",
      end: "结束时间",
      isloading: false,
      value: "2019-01-01",
      format: 'YYYY-MM-DD'
    };
  },
  mounted() {
    this.value= this.$common.getToDayDate()
    this.getList();
  },
  created() {},
  methods: {
    openPicker(type) {
      if(type == 1) {
        this.$refs.picker1.open();
      }else {
        this.$refs.picker2.open();
      }
    },
    handleConfirm1(val){
      this.start = this.$common.dateFormate(val).substr(0,10)
      this.getList();
    },
    handleConfirm2(val){
      this.end = this.$common.dateFormate(val).substr(0,10)
      this.getList();
    },
    getList() {
      let url =
        this.$CONSTANT.COUPON.findStoreEsVirtualCardUseRecordByPage +
        "?sessionId=" +
        this.$common.getCookie("sessionId");
      if (this.index == 0) {
        var param = {
          beginDate:
            this.start != "开始时间" ? this.start + "T00:00:00.000Z" : "",
          endDate: this.end != "结束时间" ? this.end + "T23:59:59.000Z" : "",
          pageIndex: 1,
          pageSize: 1000,
          storeId: localStorage.getItem("storeId")||''
          // userId: localStorage.getItem('userId')||''
        };
      } else {
        var param = {
          beginDate:
            this.start != "开始时间" ? this.start + "T00:00:00.000Z" : "",
          endDate: this.end != "结束时间" ? this.end + "T23:59:59.000Z" : "",
          pageIndex: 1,
          pageSize: 1000,
          brandId: localStorage.getItem("storeBrandId")||''
          // userId: localStorage.getItem('userId')||''
        };
      }
      this.storeD = [];
      this.brandD = [];
      // this.$vux.loading.show({
      //   text: "Loading"
      // });
      this.$common.post(url, param, res => {
        setTimeout(() => {
          this.$vux.loading.hide();
        }, 500);
        this.isloading = true;
        if (res.status == 200) {
          var bussData = res.data.bussData;
          if (this.index == 0) {
            bussData.forEach(element => {
              this.storeD.push({
                name: element.goodsName,
                img: element.goodsPhoto[0].fileUrl,
                money: element.price,
                date: element.gmtModified,
                id: element.id
              });
            });
          } else {
            bussData.forEach(element => {
              this.brandD.push({
                name: element.goodsName,
                img: element.goodsPhoto[0].fileUrl,
                money: element.price,
                date: element.gmtModified,
                id: element.id
              });
            });
          }
        } else {
          this.$vux.toast.show({
            text: res.msg,
            type: "warn",
            width: "auto"
          });
        }
      });
    },
    JumpItem() {}
  },
  components: {
    Datetime,
    LoadMore,
  }
};
</script>

<style lang="less">
#orderDataList {
  .top {
    background: #fff;
    padding: 19px 11px;
    p {
      text-align: center;
      width: 58.4%;
      height: 28px;
      line-height: 28px;
      background: #f7f7f7;
      border: 1px solid transparent;
      border-radius: 14px;
      color: #999;
      font-size: 13px;
      font-family: PingFang-SC-Medium;
    }
  }
  .middle {
    .one {
      background: #fff;
      margin-top: 8px;
      padding: 22px 11px;
      position: relative;
      img {
        position: absolute;
        top: 22px;
        left: 11px;
        width: 26.6%;
        height: 94px;
        border: 1px solid transparent;
        border-radius: 3px;
        margin-right: 15px;
        object-fit: contain;
        display: inline-block;
      }
      .detail {
        display: inline-block;
        width: 230px;
        vertical-align: top;
        position: relative;
        height: 96px;
        margin-left: 33%;
        p {
          color: #333;
          font-size: 13px;
          font-family: PingFang-SC-Medium;
        }
        span {
          margin-top: 41px;
          color: #ea030b;
          font-size: 12px;
          font-family: PingFang-SC-Bold;font-weight: 600;
          position: absolute;
          bottom: 0;
          left: 0;
          &:last-child {
            right: 0;
            left: auto;
            color: #999;
            font-size: 11px;
          }
        }
      }
    }
  }
}
</style>
